<template>
    <div class="indexmode">
        <img class="modelogo" alt="" :src="msg.logo">
        <!-- <i class="modelogo iconfont" :class="msg.logo"></i> -->
        <div>
            <div class="modetitle">{{msg.modename}}</div>
            <div class="modetext">{{msg.describe}}</div>
        </div>
    </div>
</template>


<script>
    export default {
      name: 'IndexMode',
      props: {
        msg: Object
      },
      methods: {
        
      }
    }
    </script>



<style>
.indexmode {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    border: 1px solid #000;
    padding: 0.5em;
    width: 20em;
    height: 5em;
    border-radius: 0.5em;
    margin: 0.5em;
    cursor: pointer;
}

.modelogo {
    width: 1em;
    height: 1em;
    margin-right: 0.1em;
}

.modetext {
    color: rgb(165, 165, 165);
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.modetitle {
    font-size: 1.5em;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
</style>